<script setup>
import { ref } from 'vue'
import CascaderPanel from './components/cascader-panel/CascaderPanel.vue'

const options = ref([
  {
    value: '1',
    label: 'item1',
    children: [
      { value: '1-1', label: 'item1-1', children: [
        { value: '1-1-1', label: 'item1-1-1' },
        { value: '1-1-2', label: 'item1-1-2' },
      ] },
      { value: '1-2', label: 'item1-2', children: [
        { value: '1-2-1', label: 'item1-2-1' },
        { value: '1-2-2', label: 'item1-2-2' },
      ] },
    ],
  },
  {
    value: '2',
    label: 'item2',
    children: [
      { value: '2-1', label: 'item2-1', children: [
        { value: '2-1-1', label: 'item2-1-1' },
        { value: '2-1-2', label: 'item2-1-2' },
      ] },
      { value: '2-2', label: 'item2-2', children: [
        { value: '2-2-1', label: 'item2-2-1' },
        { value: '2-2-2', label: 'item2-2-2' },
      ] },
    ],
  },
  {
    value: '3',
    label: 'item3',
    children: [
      { value: '3-1', label: 'item3-1', children: [
        { value: '3-1-1', label: 'item3-1-1' },
        { value: '3-1-2', label: 'item3-1-2' },
      ] },
      { value: '3-2', label: 'item3-2', children: [
        { value: '3-2-1', label: 'item3-2-1' },
        { value: '3-2-2', label: 'item3-2-2' },
      ] },
    ],
  },
])
</script>

<template>
  <div class="container">
    <CascaderPanel :options="options" />
  </div>
</template>

<style scoped>
.container {
  padding: 10px;
}
</style>
